---
sidebar_position: 2137 # Last in the section - deprecated
---

# makeShareableCloneOnUIRecursive

<DeprecatedBanner />

`makeShareableCloneOnUIRecursive` recursively converts JavaScript values into shareable references that can be used on different Runtimes than UI Runtime.
The reference cannot be manipulated, as it doesn't represent any standard JavaScript object. Changes to the original value don't affect the `Shareable`.
To prevent misconceptions about it we freeze the original value for object-like values and for arrays.

**Functions like `runOnUI`, `runOnRuntime`, `runOnJS`, `executeOnUIRuntimeSync` and `runOnUIAsync` automatically convert values to `Shareable` references.**

## Usage

```tsx
import {
  makeShareableCloneOnUIRecursive,
  makeShareableCloneRecursive,
} from 'react-native-worklets';

// The function `() => { console.log('Hello world!'); }` is converted into a Shareable reference,
// that can be passed to native C++ code via custom function `global.customWorkletScheduler()`.
const shareable = makeShareableCloneRecursive(() => {
  // The string `"Hello world!"` is converted into a Shareable reference,
  // that can be passed from native C++ code to the JS runtime.
  return makeShareableCloneOnUIRecursive('Hello world!');
});

const result = global.customWorkletScheduler(shareable);

console.log(result); // "Hello world!"
```

<details>
<summary>Type definitions</summary>

```typescript
export type ShareableRef<T = unknown> = {
  __hostObjectShareableJSRef: T;
};

// In case of objects with depth or arrays of objects or arrays of arrays etc.
// we add this utility type that makes it a `SharaebleRef` of the outermost type.
export type FlatShareableRef<T> =
  T extends ShareableRef<infer U> ? ShareableRef<U> : ShareableRef<T>;

function makeShareableCloneOnUIRecursive<T>(value: T): FlatShareableRef<T>;
```

</details>
